<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="../vue.js"></script>
    <style>
        .public {
          width: 100px;
          height: 100px;
        }
    
        .active {
          background: red;
        }
    
        .noActive {
          background-color: yellowgreen;
        }
    
        .red {
          color: red;
        }
    
        .bold {
          font-weight: bold;
        }
    
        .italic {
          font-style: italic;
        }
      </style>
</head>

<body>
    <div id="app">

        <div class="public" :class="isActive?'active':'noActive'">box1</div>
        <div class="public" :class="b">box2</div>
        <div class="public" :class="box3Class">box3</div>
        <div class="public" :class="{red:isRed,bold:isBold,italic:isItalic}">box4</div>
    
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                isActive: true,
                b: "red",
                box3Class: {
                    red: true,
                    bold: true,
                    italic: true
                },
                isRed: true,
                isBold: true,
                isItalic: true,
                classArr: ['red', 'italic']
            }

        }
    })
</script>

</html>